<template>
    <p>当前语言是：{{$store.state.i18n.lang}}</p>
  <div>轮播图</div>
  <el-button type="primary" @click="drawer = true" v-if="checkedKeys?.includes('2-1-C')">添加轮播图</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="轮播图编号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.bannerid }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <img :src="scope.row.img" />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="是否启用" width="180" v-if="checkedKeys?.includes('2-1-U')">
      <template #default="scope">
        <el-switch v-model="scope.row.flag" @change="(val: boolean |number|string) => changeFlag(scope.row.bannerid, val)" />
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="checkedKeys?.includes('2-1-D')">
      <template #default="scope">
        <el-button size="small" type="danger" @click="deleteBanner(scope.row.bannerid)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="drawer" title="添加轮播图" direction="rtl" :before-close="handleClose">
    <AddBannerVue @ok="okFn"></AddBannerVue>
  </el-drawer>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import {useStore} from "vuex";

import type { IBanner } from "@/myTypes";
import AddBannerVue from './AddBanner.vue';
import {getBannersApi,changeFlagApi,deleteBannerApi} from "@/api/banner"


const $store = useStore();

// 权限相关:
const checkedKeys = JSON.parse(sessionStorage.getItem("checkedkeys") as string);

console.log("添加轮播图：checkedKeys",checkedKeys);



const tableData = reactive<IBanner[]>([{

}]);

// 获取轮播图数据
function getBanners() {
  // getBannersApi()
  //   .then((res: any) => {
  //     if (res.data.code === "200") {
  //       tableData.length = 0;
  //       tableData.push(...res.data.data);
  //     }
  //   })

  getBannersApi()
    .then((data: any) => {
      if (data.code === "200") {
        tableData.length = 0;
        tableData.push(...data.data);
      }
    })
}

getBanners();


// 添加轮播图
const drawer: Ref<boolean> = ref<boolean>(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const okFn = () => {
  drawer.value = false;
  getBanners();
}



// 修改访问状态：
const changeFlag = (bannerid: string, val: number | string | boolean) => {
  changeFlagApi({bannerid,flag:(val as boolean)})
    .then((res: any) => {
      if (res.data.code == "200") {
        ElMessageBox({
          message: "修改成功",
          type: "success"
        })
      }
    })
}

// 删除轮播图

const deleteBanner = (bannerid: string) => {
  ElMessageBox.confirm(
    '亲，您真的要删除吗？',
    'Warning',
    {
      confirmButtonText: '真的',
      cancelButtonText: '点错了',
      type: 'warning',
    }
  )
    .then(() => {
      deleteBannerApi(bannerid)
      .then((res: any) => {
        if (res.data.code === "200") {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          })
          // 后端删除完毕后，需要保证界面也删除了
          // 1、第一种:重新获取数据。
          // getBanners();
          // 2、第二种：删除前端数据。
          let arr:IBanner[] = tableData.filter((item:IBanner)=>item.bannerid!=bannerid);
          tableData.length=0;
          tableData.push(...arr);      
        }
      })
    })
}

</script>

<style scoped>
img {
  width: 200px;
  height: 150px;
}
</style>